<template>
  <el-container class="main_con" >
    <div class="filter_con ds_block">
      <div class="button_area">
        <!-- <el-button type="primary" size="medium" @click="addTemplate">新增模板</el-button> -->
      </div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.name" placeholder="模板名称" style="width:300px"></el-input>       
        <label class="mr_15 mt_15">场景</label>
        <el-select size="medium" v-model="obj.scene" placeholder="请选择" class="mr_15 mt_15" style="width:250px;">
          <el-option
            v-for="(item,i) in scene"
            :key="i"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table 
         
        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="模板名称"></el-table-column>
        <el-table-column prop="scene" label="应用场景" width="200px"></el-table-column>
        <el-table-column prop="status_text" label="状态" width="150px"></el-table-column>
        <el-table-column label="操作"  width="150px">
          <template slot-scope="scope">
          <!--  <el-button v-has type="text" @click="editItem(scope.row.id)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination 
          @current-change="changePage" 
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  getTemplateWxList,
  delTemplateWx
} from '@/api/mall/sms'; 
import { getNoticeSceneAll } from '@/api/mall/notice';
export default {
  data(){
    return {
      status:[{
        value: -1,
        label: '全部'
      }, {
        value: 0,
        label: '未启用'
      }, {
        value: 1,
        label: '启用'
      }],
      scene:['全部'],
      obj:{
        name:'',
        scene:'全部',
        status:-1
      },
      objTemp:{},
      total:0,
      page:1,
      size:10,
      isLoading: false,
      list:[]
    }
  },
  components: {},
  created(){
    this.getScene();
  },
  mounted(){
    this.searchList();
  },
  methods:{
      //新增模板
      addTemplate(){
        this.$router.push('/notice/wx/wxItem');
      },
      //获取所有场景
      getScene(){
        this.isloading = true;
        getNoticeSceneAll().then(res => {
          this.isloading = false;
          let o = res.msg;
          //封装场景列表数据
          for(let x in o){
            this.scene.push(x);
          };
        });
      },
      //查询数据
      searchList(){
        //复制查询对象
        this.objTemp = Object.assign({},this.obj);
        //删除个别需要剔除的数据
        if(this.objTemp.status == -1){
          delete this.objTemp.status;
        };
        if(this.objTemp.scene == '全部'){
          delete this.objTemp.scene;
        };
        this.getDataList();
      },
      //查询数据本体
      getDataList(){
        this.isLoading = true;
        getTemplateWxList(this.objTemp,this.page,this.size).then(res => {
          this.isLoading = false;
          let o = res.msg;
          this.list = o.data;
          this.total = o.total;
        });
      },
      //编辑数据
      editItem(id){
        this.$router.push({path:'/notice/wx/wxItem',query:{'id':id,k:Math.random()}});
      },
      //删除数据
      delItem(id){
        this.$confirm('是否要删除该条数据？').then(_ => {
          this.isLoading = true;
          delTemplateWx(id).then(res => {
            this.isLoading = false;
            this.getDataList();
          });
        }).catch(_ => {
          //出错
        })
      },
      //切换分页
      changePage(page) {
        this.page = page;
        this.getDataList();
      },
    }
}
</script>

<style lang="scss" scoped></style>